<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <button @click="msg='小王'">更新</button>
      <img :src="imgsrc" alt="" />
      <!-- <ul>
        <li v-for="n in 20">
          第{{n}}个商品
        </li>
      </ul> -->
      <button @click="gengxin">强制更新</button>
    </div>
    <script src="vue.js"></script>
    <script>
      // vm.$forceUpdate()迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
      var vm = new Vue({
        el: '#app',
        mounted() {},
        methods: {
          gengxin() {
            console.log(8888888888)
            this.$forceUpdate()
          }
        },
        data() {
          return {
            msg: '小李',
            imgsrc:
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476034952&di=0ce1cf2982e07ab318d903644e82c86a&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D86853839%2C3576305254%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D750%26h%3D390'
          }
        }
      })
    </script>
  </body>
</html>
